<template>
  <div id="activeCodeIndex">
    <el-row>
      <!-- 表格查询条件 -->
      <el-col :span="24">
        <el-form :inline="true" ref="stationForm" :model="queryForm">
          <el-form-item>
            <el-input v-model="queryForm.activeCode" placeholder="激活码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.staffName" placeholder="关联用户"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryForm.templateID" clearable placeholder="请选择关联模板">
              <el-option
                v-for="item in templateList"
                :key="item.templateID"
                :label="item.name"
                :value="item.templateID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="activeCodeType"
                      placeholder="激活卡类型"
                      v-model="queryForm.activeCodeTypeCode" />
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="isOrNot"
                      placeholder="是否被激活"
                      v-model="queryForm.isActive" />
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="gptVipType"
                      placeholder="会员类型"
                      v-model="queryForm.gptVipTypeCode" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
            <el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <!-- 数据表格 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeletes">
              <el-button slot="reference" type="danger" icon="el-icon-delete">批量删除激活卡</el-button>
            </el-popconfirm>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%" @selection-change="tableDataSelected">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="activeCode" label="激活码"></el-table-column>
              <el-table-column prop="activeCodeTypeName" label="授权类型" width="100"></el-table-column>
              <el-table-column prop="gptVipTypeName" label="会员类型" width="100"></el-table-column>
              <el-table-column prop="activeDays" label="可激活时间" width="100"></el-table-column>
              <el-table-column label="是否激活">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.staffName==null" type="info">未被激活</el-tag>
                  <el-tag v-else type="success">已激活:{{ scope.row.staffName }}，于：{{ scope.row.activeTime | timeFormat }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="130">
                <template slot-scope="scope">
                  <el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
                  <el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
                  <el-dropdown v-if="scope.row.staffName==null">
                    <span class="el-dropdown-link"><i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item><span @click="rowActiveStaff(scope.row)">激活用户</span></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="tableSizeChange"
              @current-change="tableCurrentChange"
              :current-page="pageData.page"
              :page-sizes="[10, 20, 40, 100]"
              :page-size="pageData.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageData.total"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>



    <!-- 详情弹窗 -->
    <el-dialog
      title="模型详情"
      :visible.sync="dialog.showDiv"
      width="85%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item label="激活码">{{ showData.activeCode }}</el-descriptions-item>
        <el-descriptions-item label="所属模板">{{ showData.templateName }}</el-descriptions-item>
        <el-descriptions-item label="激活卡类型">{{ showData.activeCodeTypeName }}</el-descriptions-item>
        <el-descriptions-item label="会员类型">{{ showData.gptVipTypeName }}</el-descriptions-item>
        <el-descriptions-item label="激活时间">{{ showData.activeDays }}</el-descriptions-item>
        <el-descriptions-item label="激活状态" span="2">
          <el-tag v-if="showData.staffName==null" type="info">未被激活</el-tag>
          <el-tag v-else type="success">已激活:{{ showData.staffName }}，于：{{ showData.activeTime | timeFormat }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ showData.comment }}</el-descriptions-item>
      </el-descriptions>
      <el-button
        @click="
							dialog.showDiv = false;
							showData = {};
						"
      >
        关闭
      </el-button>
    </el-dialog>

    <!-- 用户激活 -->
    <el-dialog
      title="将该卡激活用户"
      :visible.sync="dialog.active"
      width="60%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :modal="false"
    >
      <el-form
        ref="activeStaffDataForm"
        :rules="activeStaffDataFormRules"
        :model="activeStaffData"
        label-width="110px"
      >
        <el-form-item label="激活码" prop="activeCode">
          <el-input
            v-model="activeStaffData.activeCode"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="激活用户" prop="staffID">
          <!-- TODO:替换成动态接口 -->
          <el-select @change="activeStaffChange" v-model="activeStaffData.staffID" clearable filterable placeholder="请选择要激活的用户">
            <el-option
              v-for="item in staffList"
              :key="item.staffID"
              :label="item.userName"
              :value="item.staffID">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 按钮组 -->
        <div style="margin-top: 10px">
          <el-button type="primary" @click="saveActiveStaff" :loading="formLoading">确定</el-button>
          <el-button
            @click="closeActiveStaff"
          >
            取消
          </el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import * as axiosAPI from '@/api/gpt/activeCode.js';
import * as modetemplateAPI from '@/api/gpt/modetemplate.js';
import gd_param from "@/components/mycomponents/gd_param.vue";
import gd_file from "@/components/mycomponents/gd_file.vue";
export default {
  name: 'activeCodeIndex',
  components:{gd_file, gd_param},
  props:{
    templateID:{
      type:String,
      default:null
    }
  },
  data() {
    return {
      //查询表单数据
      queryForm: {
        activeCode: null,
        staffName: null,
        templateID: null,
        activeCodeTypeCode: null,
        isActive:null,
        gptVipTypeCode:null
      },
      //表格数据
      tableData: [],
      //主表-分页数据
      pageData: {
        page: 1,
        size: 10,
        total: 0
      },
      //当前表格复选数据
      nowTableSelected: [],
      //弹窗状态
      dialog: {
        isEdit: false,
        saveOrEditDiv: false,
        showDiv: false,
        active:false
      },
      // 查看信息
      showData:{},
      //表单加载值
      formLoading: false,
      // 模板数据
      templateList:[],
      // 激活用户表单数据
      activeStaffData:{
        activeCode:null,
        staffID:null,
        staffName:null
      },
      // 激活用户表单验证
      activeStaffDataFormRules:{
        staffID: { required: true, message: '请选择要激活的用户', trigger: 'change' },
      },
      // 用户列表数据
      staffList:[
        {
          staffID:"123",
          userName:"张三"
        },
        {
          staffID:"456",
          userName:"李四"
        }
      ]
    };
  },
  mounted() {
    if(this.templateID!=null){
      this.queryForm.templateID = this.templateID;
    }
    this.getTableDatas();
    this.getTemplateList();
  },
  filters:{
    timeFormat:function(value){
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1 +'';
      let day = date.getDate() +'';
      let hour = date.getHours() +'';
      let minute = date.getMinutes() +'';
      let second = date.getSeconds() +'';
      return `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')} ${hour.padStart(2,'0')}:${minute.padStart(2,'0')}:${second.padStart(2,'0')}`
    }
  },
  computed:{
    getTagType(){
      return(data) =>{
        if(data == "1"){
          return "success";
        }else if(data == "2"){
          return "info";
        }else if(data == "3"){
          return "warning";
        }else{
          return "ppp";
        }
      }
    }
  },
  methods: {
    // 查询模板数据
    getTemplateList(){
      let _this = this;
       modetemplateAPI.list()
         .then(function(res){
           if(res.code == "0000"){
             _this.templateList = res.data;
           }
         })
    },
    //查询表格数据
    getTableDatas() {
      let _this = this;
      axiosAPI.pages(_this.queryForm, _this.pageData)
        .then(function(response) {
          console.log(response);
          if (response.code == '0000') {
            _this.tableData = response.data.rows;
            _this.pageData.total = response.data.total;
          }
        });
    },
    //重置查询条件表单
    resetQueryForm() {
      this.queryForm = {
        activeCode: null,
        staffName: null,
        templateID: null,
        activeCodeTypeCode: null,
        isActive:null,
        gptVipTypeCode:null
      };
      this.getTableDatas();
    },

    //提交-删除
    submitDelete(ids){
      let _this = this;
      axiosAPI.deletes(ids)
        .then(res => {
          if (res.code == '0000') {
            _this.getTableDatas();
          }
        });
    },
    //分页条目数切换
    tableSizeChange(size) {
      this.pageData.size = size;
      this.getTableDatas();
    },
    //页码切换
    tableCurrentChange(page) {
      this.pageData.page = page;
      this.getTableDatas();
    },
    //行-查看
    rowShow(data) {
      var _this = this;
      axiosAPI.getByID(data.codeID)
        .then(function(res){
          if(res.code == "0000"){
            _this.showData = res.data;
            _this.dialog.showDiv = true;
          }
        });
    },
    //行-删除
    rowDelete(data) {
      this.$confirm('确定要删除这行数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDelete(data.codeID);
      });
    },
    //点击批量删除
    moreDeletes() {
      if(this.nowTableSelected.length<=0){
        this.$notify.warning({
          title: '删除提示',
          message: '请至少选择一条数据再删除'
        });
        return;
      }
      let ids = '';

      for (var i in this.nowTableSelected) {
        ids += this.nowTableSelected[i].codeID + ',';
      }

      ids = ids.substring(0, ids.length - 1);

      //调用删除
      this.submitDelete(ids);
    },
    //表格批量选择
    tableDataSelected(data){
      this.nowTableSelected = data;
    },
    // 激活用户
    rowActiveStaff(data){
      this.activeStaffData.activeCode = data.activeCode;
      this.dialog.active = true;
    },
    // 保存激活用户
    saveActiveStaff(){
      let _this = this;
      this.$refs.activeStaffDataForm.validate(valid => {
        if (valid) {
          _this.formLoading = true;
          axiosAPI.staffActiveTheCode(_this.activeStaffData)
            .then(function(res){
              if(res.code == "0000"){
                _this.formLoading = false;
                _this.closeActiveStaff();
                _this.getTableDatas();
              }else{
                _this.formLoading = false;
              }
            })
        }
      });
    },
    // 选择激活用户切换
    activeStaffChange(data){
      if(data == "" || data == undefined){
        this.activeStaffData.staffID = null;
        this.activeStaffData.staffName = null;
      }else{
        for(var i in this.staffList){
          if(this.staffList[i].staffID == data){
            this.activeStaffData.staffID = this.staffList[i].staffID;
            this.activeStaffData.staffName = this.staffList[i].userName;
            break;
          }
        }
      }
    },
    // 关闭激活用户
    closeActiveStaff(){
      this.dialog.active = false;
      this.activeStaffData = {
        activeCode: null,
        staffID: null,
        staffName: null
      }
    }


  }
};
</script>

<style scoped></style>
